import { ConfigProvider, Flex } from 'antd';
import { createStyles } from 'antd-style';
import { FormData } from '@/pages/historyReplay/components/SearchForm.tsx';
import { FC, useState } from 'react';
import Tabs from '@/pages/historyReplay/components/Tabs.tsx';
import AlarmTable from '@/pages/historyReplay/components/AlarmTable.tsx';
import ParkingLocationTable from '@/pages/historyReplay/components/ParkingLocationTable.tsx';
import LocationTable from '@/pages/historyReplay/components/LocationTable.tsx';
import { useTheme } from '@/store/settingsStore.ts';
import { style, ThemeMode } from '@ycx/ui';
import { motion } from 'framer-motion';

const useStyle = createStyles(({ css }) => ({
  wrapper: css`
    left: 340px;
    border-radius: 16px;
    border: 1px solid var(--ycx-container-border-color);
    background: var(--ycx-container-bg-color);
    box-shadow: 0 24px 40px 0 rgba(45, 87, 150, 0.04);
    backdrop-filter: blur(8px);
    font-size: 12px !important;

    & .ant-tabs-nav {
      padding: 0 24px;
    }
  `,

  head: css`
    padding: 8px 24px;
    border-bottom: 1px solid var(--ycx-divider-color);
    position: relative;
  `,
  bar: css`
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--ycx-primary-color);
  `,
  tableWrapper: css`
    & .ant-pagination {
      margin: 10px 0 4px 0 !important;
      padding: 0 24px !important;
    }
  `,
}));

type Props = {
  searchParams?: FormData;
  loading: boolean;
};

const TableWrapper: FC<Props> = ({ searchParams, loading }) => {
  const theme = useTheme();
  const { styles } = useStyle();
  const [activeKey, setActiveKey] = useState<string>('location');

  const [collapse, setCollapse] = useState(false);

  const FoldIcon = (props: { className: string }) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="8"
      height="8"
      viewBox="0 0 8 8"
      fill="none"
      {...props}
    >
      <path
        d="M1 4L4 7L7 4"
        stroke="#33394F"
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        opacity="0.4"
        d="M1 1L4 4L7 1"
        stroke={
          theme === ThemeMode.Light ? style.fontColorLevelTwoLight : style.fontColorLevelTwoDark
        }
        strokeWidth="0.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );

  return (
    <Flex vertical className={`absolute bottom-4 right-8 ${styles.wrapper} overflow-hidden`}>
      <Flex className={styles.head} justify="space-between">
        <Tabs activeKey={activeKey} onChange={setActiveKey} />
        <Flex
          align="center"
          gap={4}
          className="cursor-pointer"
          onClick={() => setCollapse(!collapse)}
        >
          <FoldIcon className={collapse ? 'rotate-180' : ''} />
          <span className="text-xs" style={{ color: 'var(--ycx-font-color-l3)' }}>
            {collapse ? '展开' : '收起'}
          </span>
        </Flex>
      </Flex>
      <motion.div
        className={styles.tableWrapper}
        animate={{
          height: collapse ? 0 : 'auto',
        }}
        transition={{
          type: 'spring',
          stiffness: 500,
          damping: 40,
        }}
      >
        <ConfigProvider
          theme={{
            components: {
              Table: {
                colorBgContainer: 'var(--ycx-card-bg-color)',
                colorTextHeading: 'var(--ycx-font-color-l3)',
                colorText: 'var(--ycx-font-color-l2)',
                rowHoverBg: 'var(--ycx-card-bg-color)',
                cellPaddingInlineSM: 24,
                fontSize: 12,
              },
              Button: {
                fontSize: 12,
              },
              Pagination: {
                fontSize: 12,
              },
            },
          }}
        >
          {activeKey === 'location' && <LocationTable loading={loading} />}
          {activeKey === 'parkingLocation' && <ParkingLocationTable searchParams={searchParams} />}
          {activeKey === 'alarmList' && <AlarmTable searchParams={searchParams} />}
        </ConfigProvider>
      </motion.div>
    </Flex>
  );
};

export default TableWrapper;
